<template>
  <div class="app-container customer-div">
    <el-menu :default-active="listQuery.tab" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="my">我创建的</el-menu-item>
      <el-menu-item index="all">全部模板</el-menu-item>
    </el-menu>
    <!--数据列表-->
    <div class="table-container">
      <vxe-grid ref='xGrid' v-bind="gridOptions" size="mini" :loading="listLoading"  @checkbox-change="checkboxChange">
        <template #form>
          <!--搜索-->
          <div>
            <div style="background: #f5f7fa;padding:15px 15px 0 15px;border:1px solid #EBEEF5;border-bottom:0.5px solid #EBEEF5;">
              <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
                <el-form-item label="牌号：">
                  <el-select v-model="listQuery.kingGoodsId" filterable placeholder="请选择" clearable>
                    <el-option
                      v-for="item in goodsList"
                      :key="item.kingId"
                      :label="item.goodsSn"
                      :value="item.kingId">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button
                    @click="handleSearchList()"
                    type="primary">
                    查询
                  </el-button>
                  <el-button
                    @click="batchOffer()"
                    type="primary">
                    批量报价
                  </el-button>
                  <el-button
                    @click="addTemp(null)"
                    type="primary">
                    新增模板
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </template>
        <template #pager>
          <div style="overflow: hidden">
            <div class="pagination-container" style="float:right;">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="listQuery.pageNum"
                :page-size="listQuery.pageSize"
                :page-sizes="[10,15,20,50,100,200]"
                :total="count">
              </el-pagination>
            </div>
          </div>
        </template>

        <template #num1_default="{ row, rowIndex }">
          <el-link @click="toDetail(row)" type="primary"  style="font-size:12px;">{{row.orderSn}}</el-link>
        </template>
        <template #num2_default="{ row, rowIndex }">
          <span>{{row.expectSendDate}}</span>
          <span style="background: red;color:#fff;padding:0 5px;border-radius: 5px" v-if="row.urgentType == '必须'">必须</span>
          <span style="background:#ff6600;color:#fff;padding:0 5px;border-radius: 5px" v-if="row.urgentType == '可延1-2天'">1-2天</span>
          <span style="background:#ff9900;color:#fff;padding:0 5px;border-radius: 5px" v-if="row.urgentType == '可延1-2周'">1-2周</span>
          <span style="background:#0099ff;color:#fff;padding:0 5px;border-radius: 5px" v-if="row.urgentType == '等客户通知'">等待</span>
        </template>
        <template #num3_default="{ row, rowIndex }">
          <el-button type="text" @click="showIndex(row)">1</el-button>
        </template>
      </vxe-grid>
    </div>



    <!--模板批量报价-->
    <batchTempOffer ref="batchTempOffer"></batchTempOffer>


    <!--新增报价模板-->
    <addTempOffer ref="addTempOffer"></addTempOffer>

  </div>
</template>

<script>

import {supplierInquiryList} from '@/api/allInLine/company'
import {orderGoodsList} from '@/api/allInLine/partner'
import batchTempOffer from './InquiryCom/batchTempOffer'
import addTempOffer from './InquiryCom/addTempOffer'
import {formatDate} from '@/utils/date';
import store from '@/store'
import { mapGetters } from 'vuex'

const defaultListQuery={
  pageNum: 1,
  pageSize: 10,
  supplierId:'',
  contactName:'',
  inquiryDate:null,
  goodsKingId:'',
  createUserId:'',
  tab:'my'
};

export default {
  name: "offerTemplate",
  data(){
    return{
      roles:store.getters.roles ? store.getters.roles : [],
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      count:0,
      dialogVisible:false,
      listLoading:false,
      loading:false,
      loading2:false,
      supplierList2:[],
      options:[],
      userOptionList:[],
      type:1,
      gridOptions:{
        loading:this.listLoading,
        border: true,
        id: 'offerTemplate',
        align:'center',
        autoResize:true,
        height:800,
        size:'mini',
        columnConfig: {
          resizable: true
        },
        customConfig: {
          storage: true,
        },

        toolbarConfig: {
          zoom: true,
          custom: true,

        },
        columns: [
          { type: 'checkbox',
            title: '',
            fixed:'left',
            width: 50,
          },
          {
            field: '',
            title: '牌号',
            width: 100,
            slots: {
              // 使用插槽模板渲染
              default: 'num1_default',
            }
          },
          {
            field: '',
            title: '供应商',
            width: 150,
          },
          {
            field: '',
            title: '发货地区',
            width: 150,
          },
          {
            field: '',
            title: '仓库',
            width: 150,
          },
          {
            field: '',
            title: '发货方式',
            width: 100,
          },
          {
            field: '',
            title: '结算方式',
            width: 100,
          },
          {
            field: '',
            title: '起订量',
            width: 100,
          },
          {
            field: '',
            title: '包装',
            width: 100,
          },
          {
            field: '',
            title: '库存数量',
            width: 100,
          },
          {
            field: '',
            title: '绑定摩塑网商品',
            width: 150,
          },
          {
            field: '',
            title: '涨价幅度',
            width: 100,
          },
          {
            field: '',
            title: '上次报价',
            width: 100,
          },
          {
            field: '',
            title: '上次报价时间',
            width: 150,
          },
          {
            field: '',
            title: '创建人',
            width: 100,
          },
          {
            field: '',
            title: '排序',
            width: 100,
            slots: {
              // 使用插槽模板渲染
              default: 'num3_default',
            }
          },
          {
            field: '',
            title: '操作',
            width: 150,
            fixed:'right',
            slots: {
              // 使用 JSX 渲染
              default: ({ row }) => {
                return [
                  <el-button style="margin-right:10px;" type="text" size="small" onClick={ () => this.addTemp(row) }>编辑</el-button>,
                  <el-button style="margin-right:10px;" type="text" size="small" onClick={ () => this.delItem(row) }>删除</el-button>,
                ]
              }
            },
          },
        ],
        data:[{}],
      },
      records:[],
      goodsList:[]
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  components : {
    batchTempOffer,
    addTempOffer
  },
  created() {
    // this.getListData();
    // orderGoodsList().then((res)=>{
    //   this.goodsList = res.list
    // })
  },
  filters: {

  },
  methods:{
    checkboxChange(checked){
      this.records = JSON.parse(JSON.stringify(checked.records));
    },
    //修改排序
    showIndex(item){
      this.$prompt('请输入新的排序值', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue:1,
      }).then(({ value }) => {
        // this.$message({
        //   type: 'success',
        //   message: '你的邮箱是: ' + value
        // });
      }).catch(() => {

      });
    },
    //批量报价
    batchOffer(){
      this.$refs.batchTempOffer.showPop()
    },

    //新增模板
    addTemp(item){
      this.$refs.addTempOffer.showPop(item)
    },

    //删除模板
    delItem(item){
      this.$confirm('确认删除报价吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

      }).catch(() => {

      });
    },
    handleSearchList(){
      this.listQuery.pageNum = 1;
      this.getListData();
    },
    //获取列表
    getListData(){
      this.listLoading = true;
      let data = JSON.parse(JSON.stringify(this.listQuery));
      supplierInquiryList(data).then((res)=>{
        this.gridOptions.data = res.list;
        this.count = res.count;
        this.listLoading = false;
      }).catch(()=>{
        this.listLoading = false;
      })
    },

    handleSizeChange(val){
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getListData();
    },
    handleCurrentChange(val){
      this.listQuery.pageNum = val;
      this.getListData();
    },

  },
}
</script>

<style scoped lang="scss">

</style>
